<script>
import * as echarts from 'echarts';

export default {
  name: "Home",
  data() {
    return {
      user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},
      notice: [],
      inform: [],
      url: this.baseUrl+'/file/25fe6ccc15574392997007696c749eb1.png',
      activeNames: ['0']
    }

  },
  created() {
    this.request.get("/notice/type/2").then(res => {
      this.notice = res.data;
    });
    this.request.get("/notice/type/3").then(res => {
      this.inform = res.data;
    });
  }
}
</script>

<template>
  <div style="color:#666;font-size:14px">
    <div style="padding-bottom:20px">
      <b>您好！{{ user.userName }}</b>
    </div>
    <el-row>
      <el-col :span="24">
        <el-card>
          欢迎使用本系统
          <el-divider/>
          <div>祝您万事顺遂,皆得所愿,平安喜乐</div>
          <div style="margin-top: 20px">
            <div style="margin:10px 0"><strong>主题色</strong></div>
              <el-button type="primary">按钮</el-button>
              <el-button type="success">按钮</el-button>
              <el-button type="warning">按钮</el-button>
              <el-button type="danger">按钮</el-button>
              <el-button type="info">按钮</el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!--    <el-card style="margin: 10px 0">-->
    <!--      <div style="padding-bottom:20px;font-size: 24px">简单系统公告</div>-->
    <!--      <el-collapse accordion  v-for="(item,index) in notice">-->
    <!--        <el-collapse-item :name="index+''"  >-->
    <!--        <template slot="title">-->
    <!--        <span style="font-size: 20px;color:#E6A23C">{{item.title}}</span><i style="color: #E6A23C" class="header-icon el-icon-info"></i>-->
    <!--        <span style="margin-left: 20px">{{item.pubdate}}</span>-->
    <!--        </template>-->
    <!--        <div>-->
    <!--          <div style="padding:10px 0"><el-image :src="item.cover" style="width: 150px; height: 150px"></el-image></div>-->
    <!--          <div>{{item.content}}</div>-->
    <!--        </div>-->
    <!--        </el-collapse-item>-->
    <!--      </el-collapse>-->
    <!--    </el-card>-->
    <el-row>
      <el-col :span="24">
        <el-card style="margin: 10px 0">
          <div style="padding-bottom:20px;font-size: 24px">系统公告</div>
          <el-collapse accordion v-for="(item,index) in notice">
            <el-collapse-item :name="index+''">
              <template slot="title">
                <span style="font-size: 20px;color:#a0ada6;margin-right: 10px">{{ item.title }}</span><i style="color: #214283" class="header-icon el-icon-info"></i>
                <span style="margin-left: 20px">{{ item.pubdate }}</span>
              </template>
              <div>
                <div style="padding:10px 0" v-if="item.cover">
                  <el-image :src="item.cover" style="width: 150px; height: 150px"></el-image>
                </div>
                <div v-html="item.content"></div>
              </div>
            </el-collapse-item>
          </el-collapse>
        </el-card>
      </el-col>
    </el-row>
    <el-divider></el-divider>
    <el-row :gutter="20">
      <el-col :span="8">
        <el-card style="margin: 10px 0">
          <div slot="header" style="font-size:10px;height:10px" class="clearfix">
            <span>联系信息</span>
          </div>
          <div>
            <el-descriptions class="margin-top" :column="1">
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-phone"></i>
                  手机号
                </template>
                13190269625
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-position"></i>
                  联系地址
                </template>
                辽宁省朝阳市
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-chat-dot-round"></i>
                  微信号
                </template>
                Yman19990410
              </el-descriptions-item>
            </el-descriptions>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card style="margin: 10px 0">
          <div slot="header" style="font-size:10px;height:10px" class="clearfix">
            <span>更新日志</span>
          </div>
          <el-collapse accordion>
            <el-collapse-item title="v1.0.0 - 2023-09-30">
              测试
            </el-collapse-item>
          </el-collapse>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card style="margin: 10px 0">
          <div slot="header" style="font-size:10px;height:10px" class="clearfix">
            <span>捐赠支持</span>
          </div>
           <div class="block"  style="display: inline-block">
             <el-image :src="url" fit="fill"></el-image>
           </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped>
.el-divider--vertical {
  display: inline-block;
  width: 1px;
  height: 11em;
  margin: 0 10px;
  vertical-align: middle;
  position: relative;
  bottom: 70px;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}
</style>
